<template>
    <div class="app-container">
        <el-container>
          <el-header>
            <el-row>
                <el-col :span="24"> 
                  <div class="box">
                    <el-button type="primary" @click="checkCommit()">
                        交卷
                    </el-button>
                    <div class="myCountdown">
                      距离考试结束还有
                      <count-down
                        :start="startSecond"
                        end="0"
                        style="color: rgb(0,0,0)"
                        v-on:endcallback="endFn"
                        :autoshow="true"
                        splitsymbol="时-分-秒"
                        :autostart="true"
                        ref="countdown">
                      </count-down>
                    </div>

                  </div>
                </el-col>




            </el-row>

          </el-header>
        </el-container>
        <el-container>
          <el-main>
            <el-row>

              <el-col :span="5" :xs="24" style="margin-bottom: 10px">
                <el-row :gutter="24" class="card-line">
                  <p class="card-title">答题卡</p>
                  <el-tag :type="cardItemClass(item.uanswer)" plain v-for="(item,index) in list" :key="index" @click="ShowQu(item,index)">
                    {{ index + 1 }}
                  </el-tag>
                </el-row>

              </el-col>

              <el-col :span="18">
                <div>
                  <el-form ref="form" :data="this.list" label-width="80px">
                    <el-form-item>
                      <img :src="this.list[this.qucontent].url" width="500" height="auto">
                    </el-form-item>
                    <el-form-item class="qutitle">
                      第{{ this.qucontent+1 }}题.
                      {{this.list[this.qucontent].content}}
                    </el-form-item>
                    <!--单选-->
                    <div v-if="this.quType === '1'">
                      <el-form-item label="A:">
                        <el-radio  v-model="list[qucontent].uanswer" label="A" border>{{ this.list[this.qucontent].optionsA }}</el-radio >
                      </el-form-item>
                      <el-form-item label="B:">
                        <el-radio v-model="list[qucontent].uanswer" label="B" border>{{ this.list[this.qucontent].optionsB }}</el-radio>
                      </el-form-item>
                      <el-form-item label="C:">
                        <el-radio v-model="list[qucontent].uanswer" label="C" border>{{ this.list[this.qucontent].optionsC }}</el-radio>
                      </el-form-item>
                      <el-form-item label="D:">
                        <el-radio v-model="list[qucontent].uanswer" label="D" border>{{ this.list[this.qucontent].optionsD }}</el-radio>
                      </el-form-item>
                    </div>
                    <!--多选-->
                    <div v-if="this.quType === '2'">
                    <el-form-item>
                      <el-checkbox-group v-model="list[qucontent].unKnow">
                        <el-checkbox label="A" border @change="mixUanswer">A: {{ this.list[this.qucontent].optionsA }}</el-checkbox>
                        <el-checkbox label="B" border @change="mixUanswer">B: {{ this.list[this.qucontent].optionsB }}</el-checkbox>
                        <el-checkbox label="C" border @change="mixUanswer">C: {{ this.list[this.qucontent].optionsC }}</el-checkbox>
                        <el-checkbox label="D" border @change="mixUanswer">D: {{ this.list[this.qucontent].optionsD }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    </div>
                    <!--判断-->
                    <div v-if="this.quType === '3'">
                      <el-form-item>
                        <el-radio v-model="list[qucontent].uanswer" label="1" border>对</el-radio>
                        <el-radio v-model="list[qucontent].uanswer" label="2" border>错</el-radio>
                      </el-form-item>
                    </div>
                    <!--论述-->
                    <div v-if="this.quType === '4'">
                      <el-form-item label="答题区:">
                        <el-input type="textarea" v-model="list[qucontent].uanswer"></el-input>
                      </el-form-item>
                    </div>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
          
        <el-container>
          <el-footer>

          </el-footer>
        </el-container>




    </div>
  </template>
  <script>
  import CountDown from "dircountdown";
  import api from '@/api/El/eluserPaper'
  export default {
    components: { CountDown },
    data() {
      return {
        list:null,
        fullscreenLoading: false,
        qucontent:'0',
        quType: '1',
        SelectCatche:[],
        ElUserPaperAnswer : {
          id:'',
          uanswer:'',
          url:'',
          quType:'',
          content:'',
          optionsA:'',
          optionsB:'',
          optionsC:'',
          optionsD:'',
          answer:'',
        },
        startSecond: "5400", //开始时间，以秒为单位

      }
    },
    mounted() {
      const loading = this.$loading({
            lock: true,
            text: '正在载入......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
            });
      this.fetchData()
      loading.close()
    },

    methods: {
      fetchData(){
        api.InitQu(this.$route.query.elUserPaperId).then(resp =>{
          this.list = resp.data
        })
      },
      //倒计时启动事件
      startCount() {
        this.$refs.countdown.countTime();
      },
      
      //弹窗事件
      endFn() {
        alert("考试时间到!正在自动交卷");
        this.Commit()
      },
      ShowQu(item,index){
        this.qucontent = index
        this.quType = item.quType
      },
      checkCommit(){
        this.$confirm('确认交卷?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.Commit()
        }).then((resp) => {
          this.$message.success(resp.message)
        })
      },
      Commit(){
        const paperId = this.$route.query.paperId
        const elUserPaperId = this.$route.query.elUserPaperId
        api.InsertList(this.list,paperId,elUserPaperId).then(resp => {
          this.$router.push('/work/Mywork');
        })
      },
      doSomething(){
        this.SelectCatche = []
      },
      //合并数组到当前题目答案中
      mixUanswer(){
        const order = ['A', 'B', 'C', 'D']
        const sortedArray = this.list[this.qucontent].unKnow.sort((a, b) => order.indexOf(a) - order.indexOf(b))
        const myString = sortedArray.join('')
        this.list[this.qucontent].uanswer = myString
        console.log(this.list[this.qucontent].uanswer)
      },
      //答题卡样式
      cardItemClass(uanswer){
        if (uanswer) {
          return 'success'
        }

        if (!uanswer) {
          return 'info'
        }
      }
      
    },
    
    //页面监视器
    watch: {
    qucontent(newValue, oldValue) {
      this.doSomething()
    },

    
  }
  }
  </script>
<style lang="scss" scoped>
.app {
    text-align: center;
}
.qutitle{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.card-line{
  padding-left: 10px
}
.card-line span {
  cursor: pointer;
  margin: 12px;
}
.card-title{
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}
.box {
  height: 50px;
  width : auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(255, 255, 255);
  color: rgb(0, 0, 0);
  padding: 0 10px;
}

</style>